<template>
  <view :style="{ height: `${totalHeight}px` }">
    <view :class="['navbar', isFixed && 'fixed', textCenter && 'tc']"
      :style="{ height: `${totalHeight}px`, lineHeight: `${navigatorHeight}px`, 'padding-top': `${StatusBar}px`, backgroundImg: `url(${backgroundImg})` }">
      <slot>
        <view v-if="showBack" class="back" @click="onBack"  />
        <!-- :style="{ height: `${navigatorHeight}px` }" -->
        {{ title.trim() }}
      </slot>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    isFixed: {
      type: Boolean,
      default: true
    },
    showBack: {
      type: Boolean,
      default: true
    },
    customBack: {
      type: Boolean,
      default: false
    },
    textCenter: {
      type: Boolean,
      default: false
    },
    backgroundImg: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      StatusBar: this.StatusBar,
      navigatorHeight: this.navigatorHeight,
      totalHeight: this.totalHeight

    }
  },
  methods: {
    onBack() {
      if (this.customBack) {
        this.$emit('customBack')
        return false
      }
      uni.navigateBack({
        dedelta: 1
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.navbar {
  font-size: 34rpx;
  font-weight: bold;
  color: #000000;
  background-color: #161616;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  // border-bottom: 2rpx solid #F4F7FC;
  padding-left: 19rpx;

  &.fixed {
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    right: 0;
  }

  &.tc {
    text-align: center;
  }

  .back {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    left: 32rpx;
    bottom: 10upx;
    background: url('http://content.daylucky.cn/admin/image/gecn9nsbszr00ejrgupszf6b.png') no-repeat center center/ 48rpx 48rpx;
  }
}
</style>